<template>
   <div class="container b-container" id="b-container" :class="{'istxl':!index.isshow,'isz':!index.isshow}">
    <form action="" method="" class="form" id="b-form">
        <h2 class="form_title title">登入账号</h2>
        <div class="form_icons">
            <i class="iconfont icon-QQ"></i>
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-bilibili-line"></i>
        </div>
        <span class="form_span">选择登录方式活电子邮箱登录</span>
        <input type="text" class="form_input" placeholder="username" v-model="username" >
        <input type="password" class="form_input" placeholder="Password" v-model="password">
        <a class="form_link">忘记密码？</a>
        <button type='button' class="form_button button submit" @click="dl">登录</button>
    </form>
  </div>
</template>

<script>
import {userindex} from'@/stores/index'
import {ref ,watch } from 'vue'
import api from '@/utils/request';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {user} from '@/stores/user'

import {storeToRefs } from 'pinia'


export default {
  name: 'right',
  setup(){
    const index=userindex()
    const username =ref()
    const password =ref()
    const router = useRouter()
    const userimpl =user();
    // const {ishua} =storeToRefs(userindex)
    const {userstor} =storeToRefs(userimpl);

    watch(() => index.ishua, (newValue, oldValue) => {
      username.value=userimpl.userstor.username
      password.value=userimpl.userstor.password
    })

    function dl(){
      api.post('/admin-login/login',  {'username':username.value,'password':password.value})
      .then((response) => {
        localStorage.setItem('token',response.data.token)
        router.push('/index')
      })
      .catch((error) => {
        ElMessage.error(error.message)
      });
    } 
    return {index,username,password,dl,userimpl}
  }
};
</script>

<style scoped>
.form_link {
  color: #181818;
  font-size: 15px;
  margin-top: 25px;
  border-bottom: 1px solid #a0a5a8;
  line-height: 2;
}
.b-container {
  left: calc(100% - 600px);
  z-index: 0;
}
.isz {
  z-index: 200;
  transition: 1.25s;
}
.istxl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}
</style>